<script setup >
import { ref } from 'vue'
import homePanel from './homePanel.vue'
import homeSkeleton from './homeSkeleton.vue'
import { getHomeHotAPI } from '@/api'
import useLazyData from '@/conpositions'
const hotGoods = ref([])
const getHomeHotFn = async () => {
  const res = await getHomeHotAPI()
  //   console.log(res)
  hotGoods.value = res.result
}
// getHomeHotFn()
const target = useLazyData(getHomeHotFn)
</script>
<template>
<homePanel title="人气推荐" sub-title="人气爆款 不容错过" ref="target">
    <ul ref="pannel" class="goods-list" v-if="hotGoods.length">
      <li v-for="item in hotGoods" :key="item.id">
        <RouterLink :to="`/goods/${item.id}`">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.title }}</p>
          <p class="desc">{{ item.alt }}</p>
        </RouterLink>
      </li>
    </ul>
    <homeSkeleton v-else/>
  </homePanel>
</template>
<style scoped lang="less">
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background: #fff;
      .hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      .price {
        color: #999;
        font-size:18px
      }
    }
  }
</style>
